<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" href="css/jquery-weui.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css_02/weui.css">
    <link rel="stylesheet" href="css_02/example.css">
    <style>
        .article {
            padding: 10px;
            color: #616161;
            font-size: 16px;
        }
        
        .article-hd {
            line-height: 24px;
            border-bottom: 1px solid #e8e8e6;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }
        
        .article-hd h3 {
            padding-bottom: 5px;
        }
        
        .article-hd span {
            color: #a5a5a5;
        }
        
        .article-bd img {
            width: 100%;
            padding: 5px 0;
        }
        
        .divcss5-a {
            line-height: 10px
        }
        
        .divcss6-a {
            line-height: 8px
        }
        
        .sansserif {
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <script>
        function getCookie(c_name) {
            if (document.cookie.length > 0) {
                c_start = document.cookie.indexOf(c_name + "=")
                if (c_start != -1) {
                    c_start = c_start + c_name.length + 1
                    c_end = document.cookie.indexOf(";", c_start)
                    if (c_end == -1) c_end = document.cookie.length
                    return unescape(document.cookie.substring(c_start, c_end))
                }
            }
            return ""
        }

        function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        }
    </script>
    <script type="text/javascript">
        let hour_a = "";
        let hour_b = "";
        let num = 0;
        window.onload = function() {
            window.requestAnimationFrame(getDate)
            Vue.config.productionTip = false
            var ID = getQueryString("ID");
            var ID_1 = parseInt(ID);
            console.log(ID);
            const xhr = new XMLHttpRequest();
            //设置响应体数据类型
            xhr.responseType = 'json';
            var url = 'http://139.224.246.43:8082/giftapi/queryById';
            var sendData = {
                id: ID_1
            };
            xhr.open('POST', url);
            xhr.setRequestHeader('content-type', 'application/json');
            xhr.send(JSON.stringify(sendData));
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status == 200) {
                    //手动转换
                    // let data = JSON.parse(xhr.response);
                    // console.log(data);
                    // result.innerHTML = data.name;
                    hour_a = xhr.response.startTime;
                    hour_b = xhr.response.endTime;
                    num = xhr.response.num;
                    // console.log(hour);
                    new Vue({
                        el: '#root', //el用于指定当前cue实例为哪个容器服务，通常为css选择器字符串。
                        data: xhr.response,
                    })
                }
            }
        }

        function getDate() {
            window.setTimeout(function() {
                window.requestAnimationFrame(getDate)
            }, 1000 / 2)
            var d = new Date();
            var year = d.getFullYear() //获取年
            var month = d.getMonth() + 1; //获取月，从 Date 对象返回月份 (0 ~ 11)，故在此处+1
            var day = d.getDay() //获取日
            var days = d.getDate() //获取日期
            var hour = d.getHours() //获取小时
            var minute = d.getMinutes() //获取分钟
            var second = d.getSeconds() //获取秒

            if (month < 10) month = "0" + month
            if (days < 10) days = "0" + days
            if (hour < 10) hour = "0" + hour
            if (minute < 10) minute = "0" + minute
            if (second < 10) second = "0" + second

            // "2022-01-17 19:47:56"


            var week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")
            var Tools = document.getElementById("Main")
            var da = "当前时间 " + year + " 年 " + month + " 月 " + days + " 日 " + hour + " : " + minute + " :" + second
            Tools.innerHTML = da
                // var hour_begin = (hour_a[11]-'0')*10+(hour_a[12]-'0');
                // var minute_begin = (hour_a[14]-'0')*10+(hour_a[15]-'0');
                // var hour_end = (hour_a[11]-'0')*10+(hour_a[12]-'0');
                // var minute_end = (hour_a[14]-'0')*10+(hour_a[15]-'0');

            var current_time = year + "-" + month + "-" + days + " " + hour + ":" + minute + ":" + second;

            console.log(current_time);

            // var start = hour_begin*60+minute_begin;
            // var end = hour_end*60+minute_end;
            // var current = hour*60+minute;

            // hour_a = "2022-01-21 18:40:56";
            // hour_b = "2022-01-22 19:47:56";

            if (current_time >= hour_a && current_time < hour_b && num > 0) {
                document.getElementById("btn1").disabled = false;
            } else {
                document.getElementById("btn1").disabled = true;
            }
        }
    </script>
</head>

<body ontouchstart>

    <div id="root" class="weui_cells weui_cells_form">
        <div class="article">
            <div class="article-bd">
                <img v-bind:src="img" alt="">
            </div>
        </div>
        <div class="weui-panel__hd">商品详情</div>
        <div class="weui-panel__bd">
            <div role="option" class="weui-media-box weui-media-box_text">
                <p class="weui-media-box__title">{{name}}</p>
                <p class="weui-media-box__title">{{info}}</p>
                <p class="weui-media-box__title">剩余数量 {{num}}</p>
            </div>
            <div role="option" class="weui-media-box weui-media-box_text">
                <strong class="weui-media-box__title" id="Main"></strong>
                <strong class="weui-media-box__title">开抢时间  {{startTime}}</strong>
                <strong class="weui-media-box__title">结束时间  {{endTime}}</strong>
            </div>

        </div>
        <!--		<div class="weui-panel__ft">-->
        <!--			<a  class="weui-cell weui-cell_active weui-cell_access weui-cell_link">-->
        <!--				<button class="weui-btn weui-btn_primary" id="btn1">抢礼物</button>-->
        <!--&lt;!&ndash;				<span class="weui-cell__ft"></span>&ndash;&gt;-->
        <!--			</a>-->
        <!--		</div>-->
    </div>
    <div id="root2" class="weui_cells weui_cells_form">
        <div class="weui-panel__ft">
            <a class="weui-cell weui-cell_active weui-cell_access weui-cell_link">
                <button class="weui-btn weui-btn_primary" id="btn1">抢礼物</button>
                <!--				<span class="weui-cell__ft"></span>-->
            </a>
        </div>
    </div>>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-weui.min.js"></script>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        $('button').eq(0).click(function() {
            var ID_2 = getQueryString("ID");
            location.replace("./order.html?ID=" + ID_2)
        })
    </script>
    <!--	<script type="text/javascript">-->
    <!--		Vue.config.productionTip = false //组织vue 在启动时生成生产提示。-->
    <!--		window.onload = function(){-->
    <!--			var objname = getCookie("objname");-->
    <!--			console.log(objname);-->
    <!--			const xhr = new XMLHttpRequest();-->
    <!--			//设置响应体数据类型-->
    <!--			xhr.responseType = 'json';-->
    <!--			xhr.open('POST',' http://127.0.0.1:8080/test');-->
    <!--			xhr.send('uid=1');-->
    <!--			xhr.onreadystatechange = function(){-->
    <!--				if(xhr.readyState === 4&&xhr.status == 200){-->
    <!--					//手动转换-->
    <!--					// let data = JSON.parse(xhr.response);-->
    <!--					// console.log(data);-->
    <!--					// result.innerHTML = data.name;-->
    <!--					new Vue({-->
    <!--						el:'#root',    //el用于指定当前cue实例为哪个容器服务，通常为css选择器字符串。-->
    <!--						data:xhr.response.data,-->
    <!--					})-->
    <!--				}-->
    <!--			}-->

    <!--		}-->
    <!--	</script>-->

</body>

</html>